<template>
  <div>
      购物车
      <h1>{{mypid}}</h1>
      <h1>{{route.meta.title}}</h1>
    <input type="text" v-model="kilo"> 米
      <input type="text" v-model="state.kileMeters"> 千米
  </div>
</template>
<script setup>
  import {ref,reactive,watch} from 'vue'
  import {useRoute} from 'vue-router'
  let mypid=ref('');
  // 接受路由的 params 或 query传参
    let route=useRoute();
    mypid.value=route.query.pid;
    console.log(route.meta.title)
    
      let kilo=ref(0)//米
      let state=reactive({
         kileMeters:0 //千米
      })
      // watch监听ref的数据
      //    
        watch(kilo,(newVal,oldVal)=>{
            state.kileMeters=newVal/1000;
        })
      // watch 监听reactive创建的数据 需要用函数返回值的形式书写
      // watch(监听的数据，回调函数，{deep:true,immediate:true})
      watch(()=>state.kileMeters,(newVal,oldVal)=>{
          kilo.value=newVal*1000;
      },{
        immediate:true,//进入组件立即监听
        deep:true//开启深度监听
      })
    // 

   



</script>